---
import { Image } from 'astro:assets'
import CodemaskLogo from '../assets/codemask-black.svg'
import Clouds from '../assets/footer-clouds.svg'

const motto = 'Bridging Your Idea to the digital world\nYour experts in mobile and web development'
---

<footer>
    <Image
        class="clouds"
        src={Clouds}
        alt=""
    />
    <div class="footer-gradient" />
    <div class="footer-content">
        <h3>
            Brought to you by Codemask
        </h3>
        <a href="https://codemask.com">
            <Image
                src={CodemaskLogo}
                class="footer-logo"
                alt=""
            />
        </a>
        <p>
            {motto}
        </p>
    </div>
</footer>

<style>
    footer {
        --height: max(42vw, 700px);
    }

    footer {
        position: relative;
        padding: 0;
        margin: 0;
        color: var(--black);
        margin-top: calc(var(--height) / 2);
    }

    .footer-gradient {
        position: absolute;
        width: 100vw;
        height: 200vh;
        background: linear-gradient(to top, rgba(191, 38, 140, 0.6), ease, transparent);
        z-index: -10;
        bottom: 0;
    }

    .clouds {
        width: auto;
        height: var(--height);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-content {
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        position: relative;
        padding-bottom: 52px;
    }

    .footer-logo {
        width: 256px;
        height: auto;
    }

    h3 {
        font-weight: 600;
        font-size: 12px;
    }

    p {
        font-weight: 600;
        font-size: 16px;
        text-align: center;
        white-space: break-spaces;
    }
</style>
